<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <!-- <el-button type="primary" @click="onQuery">查询</el-button> -->
        <el-button @click="onLookBill" :disabled="total === 0"
          :class="total === 0 ? 'disabled_button' : ''">查看单据</el-button>
        <el-button @click="exportExcel()" :disabled="!buttonsPermissions.DaoChu"
          :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''">导出</el-button>
        <el-button :disabled="!buttonsPermissions.DaYin" :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint">打印(P)</el-button>
        <el-checkbox v-model="isShowRedFlag" @change="changeShowRedFlag">隐藏红冲单据</el-checkbox>
        <el-checkbox v-model="isShowCancelFlag" @change="changeShowCancelFlag">隐藏作废单据</el-checkbox>
        <el-checkbox v-model="isReplaceFlag" @change="changeReplaceFlag">补单</el-checkbox>
        <el-checkbox v-model="isPrintFlag" @change="changePrintFlag">隐藏已打印单据</el-checkbox>
      </div>
      <div class="btn_right">
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_screen">
        <div class="screen_left">
          <div class="screen_select_more_top">
            <div class="screen_select_more_title">{{ isBaseVersion ? '客户' : '往来单位' }}</div>
            <div class="screen_select_more_input">
              <el-tooltip :disabled="queryData.companyName.length <= 6" effect="dark" :content="queryData.companyName"
                :enterable="false" placement="bottom-start">
                <el-select v-model="queryData.companyId" style="width: 100%" @change="onChangeCompany" filterable
                  @visible-change="(value) => handleFilterMethod('', 'companyName')"
                  :filter-method="(value) => handleFilterMethod(value, 'companyName')" ref="wanglaidanwei">
                  <el-option v-for="item in supplierOptions" :key="item.id" :label="item.companyName"
                    :value="item.id"></el-option>
                </el-select>
              </el-tooltip>
              <div class="screen_select_custom_more">
                <i class="el-icon-more" @click.stop="onShowSupplier"></i>
              </div>
            </div>
          </div>
          <div>
            <p>仓库</p>
            <el-select v-model="queryData.storehouseId" class="screen_select" ref="cangku" filterable
              @visible-change="(value) => handleFilterMethod('', 'storehouseName')"
              :filter-method="(value) => handleFilterMethod(value, 'storehouseName')">
              <el-option v-for="item in ckOptions" :key="item.id" :label="item.storehouseName"
                :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="screen_select_more_top">
            <div class="screen_select_more_title">商品名称</div>
            <div class="screen_select_more_input">
              <el-tooltip :disabled="queryData.goodsName.length <= 6" effect="dark" :content="queryData.goodsName"
                :enterable="false" placement="bottom-start">
                <el-select v-model="queryData.goodsId" style="width: 100%" filterable @change="onChangeGoods"
                  ref="deptSelect" @visible-change="(value) => handleFilterMethod('', 'goodsName')"
                  :filter-method="(value) => handleFilterMethod(value, 'goodsName')">
                  <el-option v-for="item in spmcOptions" :key="item.id" :label="item.goodsName"
                    :value="item.id"></el-option>
                </el-select>
              </el-tooltip>
              <div class="screen_select_custom_more">
                <i class="el-icon-more" @click.stop="onShowCommodity"></i>
              </div>
            </div>
          </div>
          <div>
            <p>经手人</p>
            <el-select v-model="queryData.sysUserId" class="screen_select" ref="jingshouren" filterable
              @visible-change="(value) => handleFilterMethod('', 'realname')"
              :filter-method="(value) => handleFilterMethod(value, 'realname')">
              <el-option v-for="item in jsrOptions" :key="item.id" :label="item.realname" :value="item.id"></el-option>
            </el-select>
          </div>
          <div>
            <p>审核人</p>
            <el-select v-model="queryData.checkUserId" class="screen_select" filterable
              @visible-change="(value) => handleFilterMethod('', 'realname')"
              :filter-method="(value) => handleFilterMethod(value, 'realname')">
              <el-option v-for="item in jsrOptions" :key="item.id" :label="item.realname" :value="item.id"></el-option>
            </el-select>
          </div>
          <div>
            <p>制单人</p>
            <el-select v-model="queryData.createUserId" class="screen_select" filterable
              @visible-change="(value) => handleFilterMethod('', 'realname')"
              :filter-method="(value) => handleFilterMethod(value, 'realname')">
              <el-option v-for="item in jsrOptions" :key="item.id" :label="item.realname" :value="item.id"></el-option>
            </el-select>
          </div>
          <div>
            <p>单据编号</p>
            <el-tooltip :disabled="queryData.billNumber.length <= 6" effect="dark" :content="queryData.billNumber"
              :enterable="false" placement="bottom-start">
              <el-input v-model="queryData.billNumber" class="screen_select" placeholder="请输入"></el-input>
            </el-tooltip>
          </div>
          <div>
            <p>单据状态</p>
            <el-select v-model="queryData.billStatus" class="screen_select">
              <el-option v-for="item in djztOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div>
            <p>分享状态</p>
            <el-select v-model="queryData.orderRecordType" class="screen_select">
              <el-option v-for="item in shareOptions" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <!-- <div>
            <p>物流编号</p>
            <el-input v-model="queryData.wlNumber" class="screen_select" placeholder="请输入"> </el-input>
          </div>
          <div>
            <p>物流公司</p>
            <el-select v-model="queryData.wlCompanyId" class="screen_select">
              <el-option v-for="item in wlgsOptions" :key="item.id" :label="item.expressName" :value="item.id">
              </el-option>
            </el-select>
          </div>-->
          <div>
            <p>备注</p>
            <el-input v-model="queryData.remark" class="screen_select" placeholder="请输入"></el-input>
          </div>
        </div>
        <div class="screen_right">
          <el-select @change="changeDate" v-model="monthValue">
            <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-date-picker v-if="isShowDate" v-model="nowDate" type="daterange" range-separator="~"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="onClickPicker"
            value-format="yyyy-MM-dd"></el-date-picker>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="onRefresh">重置</el-button>
        </div>
      </div>
      <div class="div_table">
        <div class="div_tree">
          <div class="tree_div1">
            <el-link @click="handleAllClick" :underline="false">所有单据类型</el-link>
          </div>
          <div class="tree_structure">
            <el-tree ref="tree" :data="treeBillList" :props="defaultProps" :expand-on-click-node="false"
              @node-click="handleClick" :filter-node-method="filterNode"></el-tree>
          </div>
        </div>
        <div class="table_content">
          <el-table ref="table" show-summary :summary-method="getSummaries" highlight-current-row :header-cell-style="{
            background: '#E3F6FF',
            color: '#666666',
            textAlign: 'center',
            
            borderColor: '#dddddd',
          }" :data="tableData" height="100%" style="width: 100%" @sort-change="changeSort" :row-style="rowClass"
            @row-click="handleRowClick" @row-dblclick="handleRowDblclick">
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in columnData">
              <el-table-column :show-overflow-tooltip="true" :key="index" :sortable="item.sortable"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName" v-if="item.zidingyiState"
                :prop="item.props" min-width="120px" :width="item.cellWidth">
                <template slot-scope="scope">
                  <span :style="item.props === 'recordType' ? getRecordTypeStyle(scope.row[item.props]) : {}">
                    {{ scope.row[item.props] }}
                  </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <div class="table_pagination">
        <div class="pagination_div">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryData.pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="queryData.pageSize"
            layout="jumper, prev, pager,next, sizes" :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration ref="setColumnRef" :columnDataArr="columnData" orderType="单据查询"
      :defaultColumnDataArr="defaultColumnData" @onSaveColumn="onSaveColumn"></CConfiguration>
    <!-- 新增树形结构数据弹框 -->
    <NewCategory v-if="showNewTree" :newTreeData="newTreeData" @onSaveTreeChanges="onSaveTreeChanges"
      @onCancelTree="onCancelTree"></NewCategory>
    <!-- 商品选择弹窗 -->
    <NewDialogCommodity ref="commodityRef" :storehouseId="queryData.ck" @onSelectCommodity="onSelectCommodity">
    </NewDialogCommodity>
    <!-- 商品分类选择弹窗 -->
    <DialogCommodityType ref="commodityTypeRef" @onSelectCommodityType="onSelectCommodityType"></DialogCommodityType>
    <!-- 选择往来单位弹框 -->
    <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import NewCategory from '@/components/c_category/NewCategory'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { dateStrFromDate } from '@/utils/DateFormatter'
import NewDialogCommodity from '@/views/components/dialogCommoditySingle'
import DialogCommodityType from '@/views/components/dialogCommodityType'
/**打印 */
import dialogPrint from '../../components/dialogPrintStatic'
import DialogSupplier from '../../components/dialogSupplier'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms, formatMoney, formatPrice, formatNumber, delcommafy, handleIsBaseVersion } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { toBillDetail } from '@/utils/billUtil'
export default {
  name: 'billQuery',
  components: {
    CConfiguration,
    NewCategory,
    NewDialogCommodity,
    DialogCommodityType,
    DialogSupplier,
    dialogPrint,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('单据查询')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
    isBaseVersion() {
      return handleIsBaseVersion()
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  created() {
    if (this.isBaseVersion) {
      this.queryData.billTypeId = '002'
      // 修改列名称
      this.columnData.forEach(item => {
        if (item.morenName === '往来单位名称') {
          item.morenName = '客户名称'
        }
      })
      // 同时修改默认列配置
      this.defaultColumnData.forEach(item => {
        if (item.morenName === '往来单位名称') {
          item.morenName = '客户名称'
        }
      })
    }
    this.getData()
    this.initTreeBillList()
  },
  data() {
    return {
      filterText: '',
      // 往来单位
      supplierOptions: [],
      // 经手人
      jsrOptions: [],
      // 商品名称
      spmcOptions: [],
      // 物流公司
      wlgsOptions: [],
      // 仓库
      ckOptions: [],
      // 商品名称
      djztOptions: [
        { value: '', label: '全部' },
        { value: '5', label: '已审核' },
        { value: '0', label: '未审核' },
      ],
      // 分享状态
      shareOptions: [
        { value: '', label: '全部' },
        { value: '2', label: '已签字' },
        { value: '7', label: '已分享' },
        { value: '0', label: '未分享' },
      ],
      // 总数量
      total: 0,
      // 盘点仓库
      pdckOptions: [],
      // tree查找
      GoodsTypeName: '',
      //   过滤记录
      gljlOptions: [
        {
          value: '',
          label: '全部显示',
        },
        {
          value: '0',
          label: '不显示数量为0的记录',
        },
        {
          value: '1',
          label: '只显示数量为0的记录',
        },
      ],
      // 查询条件数据
      queryData: {
        // 分享状态
        orderRecordType: '',
        // 仓库id
        storehouseId: '',
        billNumber: '',
        billStatus: '',// 默认全部
        checkUserId: '',
        companyId: '',
        companyName: '',
        createUserId: '',
        checkUserId: '',// 审核人
        finishDate: '',
        goodsId: '',
        goodsName: '',
        billTypeId: '',
        remark: '',
        startDate: '',
        sysUserId: '',
        // wlCompanyId: '',
        // wlNumber: '',
        pageNo: 1,
        pageSize: 20,
      },
      isShowRedFlag: false,//隐藏红冲单据
      isShowCancelFlag: false,//隐藏作废单据
      isReplaceFlag: false,//补单
      isPrintFlag: false,//隐藏已打印单据
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      treeBillList: [{
        id: '001',
        label: '采购单据',
        children: [{
          id: '1',
          label: '采购订单',
        }, {
          id: '2',
          label: '采购入库单',
        }, {
          id: '3',
          label: '采购退货单',
        }, {
          id: '4',
          label: '采购换货单',
        }],
      }, {
        id: '002',
        label: '销售单据',
        children: [{
          id: '5',
          label: '销售订单',
        }, {
          id: '6',
          label: '销售出库单',
        }, {
          id: '7',
          label: '销售退货单',
        }, {
          id: '8',
          label: '销售换货单',
        }],
      }, {
        id: '003',
        label: '库存单据',
        children: [{
          id: '9',
          label: '盘点单',
        }, {
          id: '10',
          label: '报损单',
        }, {
          id: '11',
          label: '报溢单',
        }, {
          id: '12',
          label: '调拨单',
        }, {
          id: '13',
          label: '成本调整单',
        }, {
          id: '25',
          label: '其他入库单',
        }, {
          id: '26',
          label: '其他出库单',
        }],
      }, {
        id: '004',
        label: '收付单据',
        children: [{
          id: '14',
          label: '收款结算单',
        }, {
          id: '15',
          label: '付款结算单',
        }, {
          id: '29',
          label: '物流代收结算单',
        }, {
          id: '30',
          label: '物流代付结算单',
        }, {
          id: '31',
          label: '物流运费结算单',
        }, {
          id: '27',
          label: '一般费用单',
        }, {
          id: '28',
          label: '其他收入单',
        }],
      }, {
        id: '005',
        label: '调整单',
        children: [
        //   {
        //   id: '18',
        //   label: '库存调整单',
        // }, 
        {
          id: '19',
          label: '资金增加',
        }, {
          id: '20',
          label: '资金减少',
        }, {
          id: '21',
          label: '应收款增加',
        }, {
          id: '22',
          label: '应收款减少',
        }, {
          id: '23',
          label: '应付款增加',
        }, {
          id: '24',
          label: '应付款减少',
        },],
      },],
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 表格数据
      tableData: [],
      // 可显示分享状态的模块
      allowedBillTypeIds: ['1', '2', '3', '4', '5', '6', '7', '8'],
      originalColumns: [],
      columnData: [
        {
          morenName: '单据状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '100px',
          props: 'billStatus_dictText',
        },
        {
          morenName: '单据编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '170px',
          props: 'billNumber',
        },
        {
          morenName: '单据类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '100px',
          props: 'billType_dictText',
        },
        {
          morenName: '单据日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '170px',
          props: 'billDate',
        },
        {
          morenName: '往来单位名称',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '170px',
          props: 'companyId_dictText',
        },
        {
          morenName: '单据金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '100px',
          props: 'billAccount',
        },
        {
          morenName: '经手人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '100px',
          props: 'sysUserId_dictText',
        },
        {
          morenName: '审核人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '100px',
          props: 'verifyId_dictText',
        },
        {
          morenName: '制单人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '100px',
          props: 'createUserId_dictText',
        },
        {
          morenName: '制单日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '170px',
          props: 'createOrderDate',
        },
        {
          morenName: '分享状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: 'custom',
          cellWidth: '100px',
          props: 'recordType',
        },
        {
          morenName: '补单',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '100px',
          props: 'isReplacementOrder_dictText',
        },
        {
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '170px',
          props: 'remark',
        },
        {
          morenName: '摘要',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '170px',
          props: 'summary',
        },
        {
          morenName: '附记',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          cellWidth: '170px',
          props: 'postscript',
        },
        // {
        //   morenName: '物流公司',
        //   zidingyiName: '',
        //   morenState: true,
        //   zidingyiState: true,
        //   noModify: false,
        //   sortable: 'custom',
        //   props: 'wlCompany',
        // },
        // {
        //   morenName: '物流编号',
        //   zidingyiName: '',
        //   morenState: true,
        //   zidingyiState: true,
        //   noModify: false,
        //   sortable: 'custom',
        //   props: 'wlNumber',
        // },
      ],
      lookupValue: '', //类别查找值
      // tree类别数据
      treeData: [],
      batchData: [], // 存储多选的数据
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      showLiepeizhi: false, //是否显示列配置
      activeModel: {},
      subVisible: false,
      subTableData: [{}],
      total: 0, // 总数
      showLiepeizhi: false, //是否显示列配置
      showNewTree: false, //显示树形结构数据新增弹框
      // 传递数据给新增树形结构组件
      newTreeData: {
        parentNode: '',
        nowNode: '',
      },
      defaultColumnData: [], // 默认列配置
      columnKey: '单据查询', // 列配置的标识key
      updateId: '', // 修改列配置时返回的id
      // 月份选择
      monthValue: '本月',
      monthOptions: ['今日', '本周', '本月', '本年'],
      url: {
        exportXlsUrl: '/xghStorehouseGoods/xghStorehouseGoods/billQueryExportXls',
      }, // 导出地址
      billName: '单据查询',
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  mounted() {
    // 初始化列配置数据
    this.defaultColumnData = JSON.parse(JSON.stringify(this.columnData))
    this.selectTitle()
    this.originalColumns = this.columnData
  },
  methods: {
    initTreeBillList() {
      if (this.isBaseVersion) {
        this.treeBillList = [{
          id: '002',
          label: '销售单据',
          children: [{
            id: '6',
            label: '销售出库单',
          }, {
            id: '7',
            label: '销售退货单',
          }, {
            id: '8',
            label: '销售换货单',
          }],
        }]
      } else {
        this.treeBillList = [{
          id: '001',
          label: '采购单据',
          children: [{
            id: '1',
            label: '采购订单',
          }, {
            id: '2',
            label: '采购入库单',
          }, {
            id: '3',
            label: '采购退货单',
          }, {
            id: '4',
            label: '采购换货单',
          }],
        }, {
          id: '002',
          label: '销售单据',
          children: [{
            id: '5',
            label: '销售订单',
          }, {
            id: '6',
            label: '销售出库单',
          }, {
            id: '7',
            label: '销售退货单',
          }, {
            id: '8',
            label: '销售换货单',
          }],
        }, {
          id: '003',
          label: '库存单据',
          children: [{
            id: '9',
            label: '盘点单',
          }, {
            id: '10',
            label: '报损单',
          }, {
            id: '11',
            label: '报溢单',
          }, {
            id: '12',
            label: '调拨单',
          }, {
            id: '13',
            label: '成本调整单',
          }, {
            id: '25',
            label: '其他入库单',
          }, {
            id: '26',
            label: '其他出库单',
          }],
        }, {
          id: '004',
          label: '收付单据',
          children: [{
            id: '14',
            label: '收款结算单',
          }, {
            id: '15',
            label: '付款结算单',
          }, {
            id: '29',
            label: '物流代收结算单',
          }, {
            id: '30',
            label: '物流代付结算单',
          }, {
            id: '31',
            label: '物流运费结算单',
          }, {
            id: '27',
            label: '一般费用单',
          }, {
            id: '28',
            label: '其他收入单',
          }],
        }, {
          id: '005',
          label: '调整单',
          children: [{
            id: '19',
            label: '资金增加',
          }, {
            id: '20',
            label: '资金减少',
          }, {
            id: '21',
            label: '应收款增加',
          }, {
            id: '22',
            label: '应收款减少',
          }, {
            id: '23',
            label: '应付款增加',
          }, {
            id: '24',
            label: '应付款减少',
          }],
        }]
      }
    },
    // 快捷键打印
    async handleShortcutKeyPrint() {
      // 查询
      let params = {
        ...this.queryData,
        // showRedFlag: this.getParams(),
        showRedFlag: this.isShowRedFlag ? '1' : '0', // 0显示 1隐藏
        showCancelFlag: this.isShowCancelFlag ? '1' : '0', // 0显示 1隐藏
        replaceFlag: this.isReplaceFlag ? '0' : '1', // 0展示 1不展示
        printFlag: this.isPrintFlag ? '1' : '0', // 0展示 1不展示
        pageNo: 1,
        pageSize: 1000000,
      }
      let printExclusive = []
      const res = await getAction('/xghStorehouseGoods/xghStorehouseGoods/billQuery', params)
      if (res.code == 200) {
        printExclusive = res.result && res.result.records || []
        printExclusive.forEach((item) => {
          item.xghGoodsTypeId_dictText = item.xghGoodsTypeId
          item.billAccount = formatMoney(item.billAccount)
        })
      }
      this.onQuery()
      // 打印
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.startDate.substr(0, 10) + '~' + this.queryData.finishDate.substr(0, 10),
          wanglaidanwei: this.$refs.wanglaidanwei.selected.label,
          cangku: this.$refs.cangku.selected.label,
          jingshouren: this.$refs.jingshouren.selected.label,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.billName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.billName, (() => {
              this.$refs.print.show(printData, this.columnData, this.billName)
            }))
          } else {
            this.$refs.print.show(printData, this.columnData, this.billName)
          }
        }
      }
    },
    getData() {
      this.monthValue = '本月'
      this.getTimeRange(this.$setTimeRange(5))
      // 获取商品信息
      this.getGoodsData()
      // 获取商品类别信息
      this.getTypeList()
      // 获取经手人信息
      this.getStaffData()
      // 仓库信息-下拉框初始化
      this.getStorehouseOptions()
      // 物流公司-下拉框初始化
      this.getExpressList()
      // 往来单位-下拉框初始化
      this.getSupplierOptions()

      this.getBillQuery()
    },
    // 查询
    onQuery() {
      this.queryData.pageNo = 1
      this.getBillQuery()
    },
    // 触发列配置弹框
    onShowColumn() {
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 查询保存的列配置
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.columnKey)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.columnKey, this.defaultColumnData, 'props')
        this.updateId = id
        this.columnData = this.defaultColumnData
      } else if (obj.code === 404) {
        this.columnData = this.defaultColumnData
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.columnKey, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    // 选择商品
    onSelectCommodity(val) {
      // 获取到选择的商品
      // val.id
      this.queryData.goodsId = val.id
      this.queryData.goodsName = val.goodsName
    },
    // 下拉选择商品
    onChangeGoods(val) {
      this.queryData.goodsName = this.spmcOptions.find(item => item.id === val).goodsName
    },
    // 下拉选择往来单位
    onChangeCompany(val) {
      this.queryData.companyName = this.supplierOptions.find(item => item.id === val).companyName
    },
    // 选择商品分类
    onSelectCommodityType(val) {
      // 获取到选择的商品分类
      this.queryData.billTypeId = val
    },
    // 获取物流公司列表
    async getExpressList() {
      const data = await getAction('/xghExpress/xghExpress/listNoPage', {})
      if (data.code == '200') {
        this.wlgsOptions = data.result
      }
    },
    // 导出
    exportExcel() {
      const fileName = '单据查询'
      let params = {
        ...this.queryData,
        // showRedFlag: this.getParams(),
        showRedFlag: this.isShowRedFlag ? '1' : '0', // 0显示 1隐藏
        showCancelFlag: this.isShowCancelFlag ? '1' : '0', // 0显示 1隐藏
        replaceFlag: this.isReplaceFlag ? '1' : '0', // 0不展示 1展示
        printFlag: this.isPrintFlag ? '1' : '0', // 0展示 1不展示
        fileName
      }
      this.handleExportXlsByStaff(fileName, params)
    },
    //类别筛选
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getParams() {
      //0.待审核 5.审核通过 10.作废 15.反审 20.红冲 25.终止 30.完成
      // 0: 全部显示 5,10,20
      // 1: 不显示红冲  5,10
      // 2: 不显示作废  5,20
      // 3: 不显示红冲和作废  5
      if (this.isShowRedFlag && this.isShowCancelFlag) {
        return '3'
      } else if (this.isShowRedFlag) {
        return '1'
      } else if (this.isShowCancelFlag) {
        return '2'
      } else {
        return '0'
      }
    },
    /**
     * 表格数据
     */
    async getBillQuery() {
      let params = {
        ...this.queryData,
        // showRedFlag: this.getParams(),
        showRedFlag: this.isShowRedFlag ? '1' : '0', // 0显示 1隐藏
        showCancelFlag: this.isShowCancelFlag ? '1' : '0', // 0显示 1隐藏
        replaceFlag: this.isReplaceFlag ? '0' : '1', // 0展示 1不展示
        printFlag: this.isPrintFlag ? '1' : '0', // 0展示 1不展示
      }
      const res = await getAction('/xghStorehouseGoods/xghStorehouseGoods/billQuery', params)
      if (res.code == 200) {
        let data = res.result.records || []
        this.total = res.result.total
        data.forEach((item) => {
          item.xghGoodsTypeId_dictText = item.xghGoodsTypeId
          item.billAccount = item.billAccount ? formatMoney(item.billAccount) : item.billAccount
        })
        this.tableData = data
        this.$nextTick(() => {
            this.$refs.table.doLayout();
        })
      }
    },
    rowClass(row) {
      if (row.row.billStatus == 20) {
        return { color: '#ff0000' }
      }
      return { color: '#666666' }
    },
    /**
     * tree树被点击
     */
    handleClick(rowData) {
      this.queryData.billTypeId = rowData.id
      this.queryData.pageNo = 1
      const isShareAllowed = this.allowedBillTypeIds.includes(rowData.id)
      let currentColumns = JSON.parse(JSON.stringify(this.originalColumns))
      if (!isShareAllowed) {
        this.columnData = currentColumns.filter(item => 
          item.props !== 'recordType'
        )
        this.defaultColumnData = this.columnData 
      }
      else{
        this.columnData = currentColumns
        this.defaultColumnData = this.columnData 
      }
      // 点击的每一个tree树的信息对象
      this.getBillQuery()
    },
    // 所有单据类型
    handleAllClick() {
      this.queryData.billTypeId = ''
      this.queryData.pageNo = 1
      let currentColumns = JSON.parse(JSON.stringify(this.originalColumns))
      this.columnData = currentColumns
      this.defaultColumnData = this.columnData 
      this.getBillQuery()
    },
    /**
     * 刷新
     */
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      if (this.isBaseVersion) {
        this.queryData.billTypeId = '002'
        // 修改列名称
        // this.columnData.forEach(item => {
        //   if (item.morenName === '往来单位名称') {
        //     item.morenName = '客户名称'
        //   }
        // })
        // // 同时修改默认列配置
        // this.defaultColumnData.forEach(item => {
        //   if (item.morenName === '往来单位名称') {
        //     item.morenName = '客户名称'
        //   }
        // })
      }
      this.getData()
    },
    // 请求筛选条件数据
    requestQuery(obj) {
      console.log(obj, '请求')
    },
    // 从后台获取数据,重新排序
    changeSort(val) {
      console.log(val) // column: {…} order: "ascending" prop: "date"
      // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
      if (val.order) {
        //ascending 升序   descending 降序
        this.queryData.orderColumn = val.prop
        this.queryData.orderType = val.order == 'ascending' ? 1 : 2
        this.getBillQuery()
      } else {
        this.queryData.orderColumn = undefined
        this.queryData.orderType = undefined
        this.getBillQuery()
      }
    },
    // 触发表格多选按钮
    handleSelectionChange(val) {
      this.batchData = val
    },
    // 判断当前选择时间段
    changeDate(val) {
      this.isShowDate = true
      switch (val) {
        case '全部':
          this.isShowDate = false
          this.queryData.startDate = ''
          this.queryData.finishDate = ''
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
      // this.getTableData()
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.startDate = data.now + ' 00:00:00'
      this.queryData.finishDate = data.end + ' 23:59:59'
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.startDate = val[0] + ' 00:00:00'
      this.queryData.finishDate = val[1] + ' 23:59:59'
    },
    // 列配置取消按钮触发
    onCancelColumn() { },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      var that = this
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + that.total + '条明细'
        } else if (column.property === 'billAccount') {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = formatMoney(sums[index]) // 保留2位小数，解决小数列合计精度缺失的问题
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.getBillQuery()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.queryData.pageNo = val
      this.getBillQuery()
    },
    // 隐藏红冲单据
    changeShowRedFlag() {
      this.onQuery()
    },
    // 隐藏作废单据
    changeShowCancelFlag() {
      this.onQuery()
    },
    // 补单
    changeReplaceFlag() {
      this.onQuery()
    },
    // 隐藏已打印单据
    changePrintFlag() {
      this.onQuery()
    },
    // 显示商品弹窗
    onShowCommodity() {
      this.$refs.commodityRef.dialogVisible = true
    },
    // 显示商品分类弹窗
    onShowCommodityType() {
      this.$refs.commodityTypeRef.dialogVisible = true
    },
    // 商品类别信息-下拉框初始化
    getTypeList() {
      getAction('/xghGoodsType/xghGoodsType/typeList', {}).then((res) => {
        if (res.code === 200) {
          this.splbOptions = res.result
        }
      })
    },
    // 获取往来单位信息
    getSupplierOptions() {
      getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
        if (res.code === 200) {
          this.supplierOptions = res.result
          this.totalCompanys = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 商品信息
    getGoodsData() {
      getAction('/xghGoods/xghGoods/getGoodsNameList', {}).then((res) => {
        if (res.code === 200) {
          this.spmcOptions = res.result
          this.totalGoods = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 经手人信息-下拉框初始化
    getStaffData() {
      getAction('/dept/xghAccountBookDept/getAllDeptUsers', {}).then((res) => {
        if (res.code === 200) {
          this.jsrOptions = res.result
          this.totalPersons = res.result
        }
      })
    },
    // 仓库信息-下拉框初始化
    getStorehouseOptions() {
      getAction('/xghStorehouse/xghStorehouse/queryListByPole', {}).then((res) => {
        if (res.code === 200) {
          this.ckOptions = res.result
          this.totalStores = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 打开选择往来单位弹出框
    onShowSupplier() {
      this.$refs.supplierRef.dialogVisible = true
    },
    // 当前选择往来单位数据
    onSelectSupplier(val) {
      this.queryData.companyId = val.id
      this.queryData.companyName = val.companyName
    },
    handleRowClick(row) {
      this.activeModel = row
    },
    handleRowDblclick(row) {
      this.activeModel = row
      this.onLookBill()
    },
    onLookBill() {
      if (JSON.stringify(this.activeModel) == "{}") {
        this.activeModel = this.tableData[0]
      }
      // 跳转对应单据页面
      toBillDetail(this, this.activeModel.billType, this.activeModel.id)
    },
    // 搜索
    handleFilterMethod(value, label) {
      if (label == 'companyName') {
        this.supplierOptions = this.filterMethod(this.supplierOptions, value, label)
      } else if (label == 'storehouseName') {
        this.ckOptions = this.filterMethod(this.ckOptions, value, label)
      } else if (label == 'realname') {
        this.jsrOptions = this.filterMethod(this.jsrOptions, value, label)
      } else if (label == 'goodsName') {
        this.spmcOptions = this.filterMethod(this.spmcOptions, value, label)
      }
    },
    // 设置列样式
    getRecordTypeStyle(value) {
      if (value === '已签字') {
        return { color: '#0089FF' };
      } else if (value === '已分享') {
        return { color: '#FD6C21' };
      }
      return {}; // 默认为正常颜色
    },
  },
}
</script>

<style lang="scss" scoped>
$font-size: 12px;
$height-input: 30px; //0.55rem的高度
$height: 50px; //1rem的高度

.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: $height;
  display: flex;
  align-items: center;

  ::v-deep .el-button {
    width: 80px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size;
    border-radius: 0.1rem;
    border: none;
    margin-right: 6px;
    margin-left: 0;
  }

  .el-button--default {
    color: #666;
  }

  ::v-deep .el-select {
    width: 1rem;
    height: $height-input;
    box-sizing: border-box;
    margin-right: 0.112507rem;

    .el-input {
      .el-input__inner {
        height: $height-input;
        border: none;
        font-size: $font-size;
      }

      .el-input__suffix {
        height: $height-input;
        display: flex;
        align-items: center;
      }
    }
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    ::v-deep .el-checkbox {
      margin-right: 11px;

      .el-checkbox__label {
        padding-left: 6px;
        font-size: $font-size;
        color: #666;
      }
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 4.725295rem;
      height: $height-input;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: $height-input;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: $font-size;
        color: #666;

        &::placeholder {
          font-size: $font-size;
          color: #c1c1c1;
        }
      }
    }

    .el-button {
      width: 1rem;
    }

    .set_up {
      font-size: 20px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .div_screen {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    ::v-deep .el-select {
      height: 30px;
      box-sizing: border-box;
      border-radius: 4px;

      .el-input {
        .el-input__inner {
          height: 30px;
          border-color: #e3e3e3;
          font-size: $font-size;
          padding-left: 0.15rem;
        }

        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }

    ::v-deep .el-checkbox {
      .el-checkbox__label {
        font-size: $font-size;
        padding-left: 0.1rem;
        color: #666;
      }
    }

    .screen_left {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      height: 100%;
      margin-top: 3px;
      min-width: 600px;

      >div {
        width: 176px;
        height: $height-input;
        margin-top: 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-right: 14px;

        >p {
          margin: 0;
          width: auto;
          min-width: 50px;
          margin-right: 6px;
          font-size: $font-size;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        .screen_select {
          flex: 1;
          display: flex;
          height: 30px;
          align-items: center;
          margin-right: 0;
          text-align: left;
          text-align-last: left;
        }

        ::v-deep .el-input__inner {
          height: $height-input;
          padding: 0 5px;
          font-size: $font-size;
        }

        .set_input_width {
          display: flex;
          align-items: center;
          margin-right: 20px;
        }
      }
    }

    .screen_right {
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      box-sizing: border-box;
      padding-top: 15px;

      ::v-deep .el-button {
        width: 45px;
        height: $height-input;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: $font-size;
        border-radius: 0.1rem;
        border: none;
        &:last-child {
          color: #1a93fa;
          border: 1px solid #1993fb;
        }
      }

      ::v-deep .el-select {
        width: 80px;
        margin-right: 6px;
      }

      ::v-deep .el-date-editor {
        width: 230px;
        height: $height-input;
        background: #ffffff;
        border: 1px solid #d9d9d9;
        margin-right: 10px;
        padding: 3px 6px;

        .el-range__icon {
          position: absolute;
          right: 0;
          line-height: 30px;
        }

        .el-range-separator {
          line-height: 24px;
        }

        .el-range-input {
          font-size: $font-size;
        }

        .el-range__close-icon {
          display: none;
        }
      }
    }
  }

  .div_table {
    width: 100%;
    height: calc(100% - 150px - 1rem);
    margin-top: 22px;
    display: flex;
    box-sizing: border-box;

    .div_tree {
      width: 180px;
      height: 100%;
      box-sizing: border-box;
      padding: 6px 0;
      border: 1px solid #e3e3e3;
      transition: all 0.3s;

      .tree_div1 {
        width: 100%;
        height: 20px;
        box-sizing: border-box;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          color: #666666;
          font-size: $font-size;
        }

        .el-link {
          color: #666666;
          font-size: $font-size;
        }
      }

      .tree_structure {
        width: 100%;
        height: calc(100% - 0.337521rem - 0.131258rem - 0.131258rem - 0.55rem);
        box-sizing: border-box;
        padding: 0 0.168761rem;
        margin-top: 0.131258rem;
        overflow: auto;

        ::v-deep .el-tree {
          width: 100%;

          .el-tree-node__children {
            .el-tree-node__label {
              color: #666;
              font-weight: normal;
            }
          }

          .el-tree-node__label {
            font-size: $font-size;
            font-weight: 600;
          }

          .el-tree-node__content>.el-tree-node__expand-icon {
            padding-left: 0;
          }
        }
      }
    }

    .table_content {
      width: calc(100% - 180px);
      margin-left: 0.187512rem;
      height: 100%;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          &:first-child {
            .cell {
              display: flex;
              justify-content: center;
              align-items: center;

              .dev {
                display: flex;
                justify-content: center;
              }
            }
          }

          &:last-child {
            border-right: none;
          }
        }

        .el-table-column--selection {
          .cell {
            padding: 0;
            text-align: center;
          }
        }

        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        .cell {
          min-height: 20px;
          // line-height: 30px;
          font-size: $font-size;
        }

        // th选择框颜色修改
        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        // td选择框颜色修改
        .is-checked {
          .el-checkbox__inner {
            color: #1b93f9;
            background-color: #1b93f9;
            border-color: #1b93f9;
          }
        }

        .el-table__body tr:hover>td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
  }

  .table_pagination {
    width: 100%;
    // height: 1rem;
    box-sizing: border-box;
    padding: 0.168761rem 0;
    display: flex;

    .pagination_div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      ::v-deep .el-pagination {
        padding: 0;
        height: 0.525033rem;

        .el-pagination__sizes {
          margin: 0;

          .el-input {
            margin-right: 0;
          }
        }
      }
    }
  }
}

::v-deep .el-dialog__body {
  padding-top: 10px !important;
}

.sub_inventory {
  .top_text {
    font-size: $font-size;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 17px;
    color: #666666;
    margin-bottom: 10px;
  }

  ::v-deep .el-table {
    border: 1px solid #e3e3e3;
    box-sizing: border-box;

    th,
    td {
      padding: 0;
      color: #666;
      box-sizing: border-box;
      border-right: 1px solid #e3e3e3;

      &:last-child {
        border-right: none;
      }
    }

    .el-table-column--selection {
      .cell {
        padding: 0;
        text-align: center;
      }
    }

    .el-table__header {
      tr {
        &:last-child {
          th {
            background: rgb(237, 237, 237) !important;
          }
        }
      }
    }

    .cell {
      // line-height: 30px;
      font-size: $font-size;
    }
  }
}

.screen_select_more_top {
  display: flex;
  align-items: center;

  .screen_select_more_title {
    width: auto;
    min-width: 50px;
    margin-right: 6px;
    line-height: $height-input;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
  }

  .screen_select_more_input {
    flex: 1;
    height: $height-input;
    position: relative;

    ::v-deep .el-select {
      .el-input {
        .el-input__inner {
          height: $height-input;
          border-color: #e3e3e3;
          font-size: $font-size;
          padding-left: 5px;
        }

        .el-input__suffix {
          height: $height-input;
          display: flex;
          align-items: center;
        }
      }
    }

    ::v-deep .el-input {
      width: 100%;

      .el-input__inner {
        height: $height-input;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 5px;
      }

      .el-input__suffix {
        height: $height-input;
        display: flex;
        align-items: center;
      }
    }

    .screen_select_custom_more {
      position: absolute;
      right: 5px;
      padding-right: 5px;
      z-index: 10;
      top: 1px;
      background: #fff;
      height: 28px;
      display: flex;
      align-items: center;
      color: #bfbfbf;
    }
  }
}
</style>
